<template>
  <div style="width: 100%;height: 100%;" id="MyThree" v-loading="loading" element-loading-text="动画加载中,请稍后!">
  </div>
  <div id="provinceInfo"></div>
  <div id="provincePicDescInfo">
    <p style="text-align: left;font-weight: bold">图片介绍:</p>
    <p style="text-indent: 2em;"></p>
  </div>
  <audio id="Lines" ref="Lines">
    <source src="" type="audio/mp3">
  </audio>
</template>

<script>

// Depencey依赖
import * as THREE from "three";
import * as d3geo from 'd3';
import * as TWEEN from '@tweenjs/tween.js'
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls.js"
import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader.js"
import {FontLoader} from "three/examples/jsm/loaders/FontLoader.js"
import {TextGeometry} from "three/examples/jsm/geometries/TextGeometry.js"
import {CSS3DObject, CSS3DRenderer} from 'three/examples/jsm/renderers/CSS3DRenderer.js';
import axios from "axios";

// Mixins
import {OpeningAnimation}  from "../../mixins/OpeningAnimation"
import {PublicMethodsExtend} from "../../mixins/PublicMethodsExtend.js"
import {OneExp} from "../../mixins/OneExp.js"
import {TwoExp} from "../../mixins/TwoExp.js"
import {ThreeExp} from "../../mixins/ThreeExp.js"
import {FourExp} from "../../mixins/FourExp.js"
import {FiveExp} from "../../mixins/FiveExp.js"
import {SixExp} from "../../mixins/SixExp.js"
import {SevenExp} from "../../mixins/SevenExp.js"
import {EightExp} from "../../mixins/EightExp.js"

// Class
import MyFlyLine from "../../class/MyFlyLine";


export default {
  mixins: [OpeningAnimation,PublicMethodsExtend,OneExp, TwoExp, ThreeExp, FourExp, FiveExp, SixExp, SevenExp, EightExp],
  props: {
    viewData: Object,
  },
  data() {
    return {
      MapData: '',
      ViewDom: '',
      provinceInfo: "",
      provincePicDescInfo:"",
      beforeColor: "",
      loading: true,
      mapPointerAnis:[],
      flyLinesArray:[],
      myColor:this.$store.state.color,
    }
  },
  async mounted() {
    this.initDom();
    // 初始化3D环境
    this.initEnvironment()
    await this.loadCountryNumber("init")
    this.loadInitModel()
    // 构建光照系统
    this.buildLightSystem()
    // 构建辅助系统
    this.buildAuxSystem()
    await axios.get("json/world_coldWar.json").then((res) => {
      this.MapData = res.data
      this.initMap()
      this.render()
      localStorage.setItem("coldWarMap",JSON.stringify(res.data))
      // this.initNatoMap()
    })
    await axios.get("json/world.json").then((res)=>{
      localStorage.setItem("worldMap",JSON.stringify(res.data))
    })
    this.loading = false ;
    this.$parent.centerDialogVisible = true ;
  },
  watch: {
    viewData: function () {
      this.updateView()
    }
  },
  methods: {
    // 渲染函数
    render() {
      requestAnimationFrame(this.render);
      this.raycaster.setFromCamera(this.mouse, this.camera);
      this.isShowPicDesc() ;
      this.isShowMapPointer() ;
      this.isShowMapInfo()
      TWEEN.update()
      // console.log(this.camera)
      this.animationMixer.update(this.clock.getDelta());
      this.renderer.render(this.scene, this.camera);
      this.labelRenderer.render(this.scene, this.camera);
      if(this.flyLinesArray){
        this.flyLinesArray.forEach((item)=>{
          item.playAnimation()
        })
      }
      if(this.lightWall){
        this.lightWall.updateData();
      }
      if(this.radar){
        this.radar.updateData()
      }

    },
    chooseExp(event){
      // 获得地图指示器模型群组
      var pointerGroup = this.scene.getObjectByName("pointerGroup") ;
      // 获得图片框模型群组
      var PicGroup     = this.scene.getObjectByName("PicGroup")
      var Sx = event.clientX; //鼠标单击位置横坐标
      var Sy = event.clientY; //鼠标单击位置纵坐标
      //屏幕坐标转WebGL标准设备坐标
      var x = (Sx / window.innerWidth) * 2 - 1; //WebGL标准设备横坐标
      var y = -(Sy / window.innerHeight) * 2 + 1; //WebGL标准设备纵坐标
      //创建一个射线投射器`Raycaster`
      var raycaster = new THREE.Raycaster();
      //通过鼠标单击位置标准设备坐标和相机参数计算射线投射器`Raycaster`的射线属性.ray
      raycaster.setFromCamera(new THREE.Vector2(x, y), this.camera);
      //返回.intersectObjects()参数中射线选中的网格模型对象

      // 图框射线拾取
      if(PicGroup){
        var inersects = raycaster.intersectObjects(PicGroup.children, true);
        // console.log(inersects)
        if(inersects.length > 0){
          let newCameraPos = {x:-197.13948761669698,y:105.71639820927116,z:95.82984982381682};
          let newTargetPos = {x:-174.61695096343828,y:83.28890040527531,z:-224.36676144599915};
          this.animateCamera(this.camera.position,this.controls.target,newCameraPos,newTargetPos,3000);
        }
      }

      // 地图指示器的射线拾取
      if(pointerGroup){
        var intersects = raycaster.intersectObjects(pointerGroup.children, true);
        if(intersects.length > 0){
          var name = intersects[0].object.parent.parent.parent.name
          if(intersects[0].object.parent.parent.parent.visible == true){
            if(name == "onePointer") {
              this.$parent.firstExpantion();
            }
            if(name == "twoPointer") {
              this.$parent.secondExpantion();
            }
            if(name == "threePointer") {
              this.$parent.thirdExp();
            }
            if(name == "fourPointer") {
              this.$parent.fourthExp();
            }
            if(name == "fivePointer") {
              this.$parent.fifthExp();
            }
            if(name == "sixPointer") {
              this.$parent.sixthExp();
            }
            if(name == "sevenPointer") {
              this.$parent.sevenExp();
            }
            if(name == "eightPointer") {
              this.$parent.eighthExp();
            }
          }
        }
      }
    },
    async loadInitModel() {
      var picGroup  = new THREE.Object3D() ;
      var pointerGroup  = new THREE.Object3D() ;

      picGroup.name = "PicGroup" ;
      pointerGroup.name = "pointerGroup" ;
      this.scene.add(picGroup) ;
      this.scene.add(pointerGroup) ;
      var tipsModel = this.gltfLoadModel("model/public/photo_frame/scene.gltf");
      var eventModel = this.gltfLoadModel("model/public/mappointer/scene.gltf");
      var relatedModel = this.gltfLoadModel("model/public/font/RelatedPhoto/scene.gltf");

      // 加载 相关照片模型
      relatedModel.then((res)=>{
        let model = res.scene ;
        model.scale.set(15,15,15) ;
        model.position.set(-180,130,-250) ;
        model.name = "RelatedPhoto" ;
        this.scene.add(model)
      })
      await tipsModel.then((res) => {
        let model = res.scene;
        // 读取第一个模型，并设置属性
        model.rotateY(-Math.PI/2)
        model.position.set(-100, 80, -270);
        model.scale.set(30, 30, 30)
        picGroup.add(model)

        // console.log(model)
        // 克隆第二个画框
        let  pic2 = model.clone();
        pic2.children[0].children[1].material = model.children[0].children[1].material.clone();
        pic2.position.set(-180, 80, -270)
        picGroup.add(pic2);

        // 克隆第三个画框
        let  pic3 = model.clone();
        pic3.position.set(-260, 80, -270)
        pic3.children[0].children[1].material = model.children[0].children[1].material.clone();
        picGroup.add(pic3);
        var imgData = [
            {imgUrl:"img/relatedPhoto/initOne.png",imgDesc:"俄罗斯与北约关系再次引发关注。双方交流渠道被切断，欧亚大陆军事强国与大西洋军事联盟关系陷入停滞。自设立正式外交关系以来，俄北龃龉不断，关系呈“螺旋式”下降态势，在短期内不会转圜，对抗将成为常态。"},
            {imgUrl:"img/relatedPhoto/initThree.png",imgDesc:"俄乌冲突的起因是由北约东扩问题造成的。根源还是在于，美国一味地搞集团政治、对抗外交，长期漠视俄罗斯的安全关切，最终导致大国关系失去平衡，出现地缘政治悲剧。"},
            {imgUrl:"img/relatedPhoto/initTwo.png",imgDesc:"美俄关系恶化对全球战略稳定的破坏，欧俄之间寻求关系缓和的努力付诸东流，以及欧洲对于美国施压“敢怒不敢言”的现实，都证明美国才是俄乌冲突的幕后推手和“受益者”，都凸显了美式霸权自私自利的本质。"}
        ]
        this.changePicTexture(imgData)
      })

      await eventModel.then((res)=>{
        var mapPointerData = [
            {position:{x:43.15697047261416,y:10,z:-3.186868421146526},contentName:"第一次扩张",isRotate:false,fontSize:"80px",labelHeight:10,modelName:"onePointer"},
            {position:{x:16.652500220608744,y:10,z:-28.16316510452917},contentName:"第二次扩张",isRotate:false,fontSize:"80px",labelHeight:10,modelName:"twoPointer"},
            {position:{x:-1.1918212783689341,y:10,z:-4.872641547071394},contentName:"第三次扩张",isRotate:false,fontSize:"80px",labelHeight:10,modelName:"threePointer"},
            {position:{x:33.65312162557028,y:10,z:-29.067817156784315},contentName:"第四次扩张",isRotate:false,fontSize:"80px",labelHeight:10,modelName:"fourPointer"},
            {position:{x:41.72586578513716,y:10,z:-46.58374229906437},contentName:"五次扩张",isRotate:false,fontSize:"80px",labelHeight:10,modelName:"fivePointer"},
            {position:{x:31.110669779480475,y:10,z:-19.053616664365038},contentName:"第六次扩张",isRotate:false,fontSize:"80px",labelHeight:10,modelName:"sixPointer"},
            {position:{x:25.54969024658203,y:10,z:-13.08255100250244},contentName:"第七次扩张",isRotate:false,fontSize:"80px",labelHeight:10,modelName:"sevenPointer"},
            {position:{x:35.027783300910684,y:10,z:-8.249666001977863},contentName:"第八次扩张",isRotate:false,fontSize:"80px",labelHeight:10,modelName:"eightPointer"},
        ]
        let animation = res.animations[0] ;
        var mesh = res.scene.children[0].children[0].children[0].material ;

        mapPointerData.forEach((item)=>{
          let pointer =  res.scene.clone() ;
          pointer.children[0].children[0].children[0].material = mesh.clone();
          var Label = this.get3dLabel(item.contentName,item.isRotate,item.fontSize,item.labelHeight);
          this.bindMapPointer(pointer,Label,animation,item.position,item.modelName);
        })
      })
    },
    // 获取3d图签的方法
    get3dLabel(contentName, isRotate, fontSize, labelHeight) {
      if (fontSize == undefined) {
        fontSize = "5px"
      }
      if (labelHeight == undefined) {
        labelHeight = 2
      }
      let myDiv = document.createElement('div');
      myDiv.style.fontSize = fontSize ;
      myDiv.style.color = "#000000" ;
      myDiv.style.backgroundColor= "#ffffff" ;
      myDiv.style.padding = "10px" ;
      myDiv.style.borderRadius= "5px" ;
      myDiv.textContent = contentName;
      let myLabel = new CSS3DObject(myDiv);
      if (isRotate == true) {
        myLabel.rotateY(Math.PI)
      }
      myLabel.scale.set(0.025, 0.025, 0.025)
      myLabel.position.set(0, labelHeight, 0);
      return myLabel;
    },
    // 动态更换贴图纹理函数
    changeTexture(imgPath) {
      var texture = new THREE.TextureLoader().load(imgPath);
      texture.flipY = false
      return texture
    },
    // 播放动画函数(仅播放一次)
    onceActionPlay(animationClip, obj) {
      let action = this.animationMixer.clipAction(animationClip, obj);
      action.play()
      action.loop = THREE.LoopOnce;
      action.clampWhenFinished = true;
    },
    // Gltf模型加载器(异步Promise)
    gltfLoadModel(path) {
      var progress;
      return new Promise((resolve, reject) => {
        var gltfLoader = new GLTFLoader();
        gltfLoader.load(path, resolve, progress, reject);
      });
    },
    // 字体模型加载器(异步Promise)
    fontLoadModel(path) {
      var progress;
      return new Promise((resolve, reject) => {
        var fontLoader = new FontLoader();
        fontLoader.load(path, resolve, progress, reject);
      });
    },
    // Tween动画函数
    animateCamera(oldP, oldT, newP, newT, time, callBack) {
      var coords = {
        x1: oldP.x,
        y1: oldP.y,
        z1: oldP.z,
        x2: oldT.x,
        y2: oldT.y,
        z2: oldT.z
      }
      var tween = new TWEEN.Tween(coords);
      tween.to({
        x1: newP.x,
        y1: newP.y,
        z1: newP.z,
        x2: newT.x,
        y2: newT.y,
        z2: newT.z
      }, time);
      tween.easing(TWEEN.Easing.Quadratic.Out);
      tween.onUpdate(() => {
        this.camera.position.set(coords.x1, coords.y1, coords.z1);
        this.controls.target.set(coords.x2, coords.y2, coords.z2)
        this.controls.update();
      });
      tween.onComplete(() => {
      });
      tween.start();
    },
    // 更新视图
    updateView() {
      this.viewData.oldCountry.forEach((cName) => {
        this.map.children.forEach((item) => {
          if (item.properties.name == cName) {
            item.children.forEach((area) => {
              if (area.type == "Mesh") {
                area.material.color.set(this.myColor.natoArea)
              }
            })
          }
        })
      })

      this.viewData.newCountry.forEach((cName) => {
        this.map.children.forEach((item) => {
          if (item.properties.name == cName) {
            item.children.forEach((area) => {
              if (area.type == "Mesh") {
                area.material.color.set(this.myColor.newNatoArea)
              }
            })
          }
        })
      })
    },
    // 初始化Dom
    initDom() {
      this.ViewDom = document.getElementById("MyThree");
      this.provinceInfo = document.getElementById("provinceInfo");
      this.provincePicDescInfo = document.getElementById("provincePicDescInfo");
    },
    // 初始化北约地图
    initNatoMap() {
      var initData = ["United States", "Canada", "United Kingdom", "Belgium", "France", "Netherlands",
        "Luxembourg", "Denmark", "Norway", "Iceland", "Portugal", "Italy"
      ]
      this.map.children.forEach((item) => {
        item.children.forEach((area) => {
          if (area.type == "Mesh") {
            area.material.color.set(this.myColor.commonArea)
          }
        })
      })

      initData.forEach((cName) => {
        this.map.children.forEach((item) => {
          if (item.properties.name == cName) {
            item.children.forEach((area) => {
              if (area.type == "Mesh") {
                area.material.color.set(this.myColor.natoArea)
              }
            })
          }
        })
      })
    },
    // 初始化3D环境
    initEnvironment() {
      this.scene = new THREE.Scene();
      this.scene.fog = new THREE.Fog( 0xffffff, 0.03, 1500);
      // 0xf0f0f0
      // this.scene.background = new THREE.Color("#042468")
      // 时钟
      this.clock = new THREE.Clock();
      // 3d 动画混合器
      this.animationMixer = new THREE.AnimationMixer(this.scene);

      // 建一个空对象存放对象
      this.map = new THREE.Object3D()
      // 设置相机参数
      this.setCamera();
      // 初始化
      this.renderer = new THREE.WebGLRenderer({
        alpha: true,
        antialias: true
      })
      // 初始化3DRenderer创建标签渲染器
      this.labelRenderer = new CSS3DRenderer();

      // 设置光线拾取器
      this.raycaster = new THREE.Raycaster();
      this.mouse = new THREE.Vector2();
      this.eventOffset = {};
      // 设置3D渲染器
      this.renderer.setSize(this.ViewDom.offsetWidth, this.ViewDom.offsetHeight)
      this.renderer.setPixelRatio(Math.min(window.devicePixelRatio,2))
      // 设置2D标签渲染器
      this.labelRenderer.setSize(window.innerWidth, window.innerHeight);
      this.labelRenderer.domElement.style.position = 'absolute';
      this.labelRenderer.domElement.style.top = '0px';

      document.addEventListener('mousemove', this.onDocumentMouseMove, false)
      window.addEventListener('resize', this.onWindowResize, false)
      window.addEventListener("click",this.chooseExp,false)
    },
    // 初始化相机
    setCamera() {
      this.camera = new THREE.PerspectiveCamera(35, this.ViewDom.offsetWidth / this.ViewDom.offsetHeight, 1,
          10000);
      this.camera.position.set(-3.8798332446100394, 160.13458397742934, 377.0645901385921);
      this.camera.lookAt(0, 0, 0);
    },
    // 构建辅助系统: 网格和坐标
    buildAuxSystem() {
      let axisHelper = new THREE.AxesHelper(2000)
      this.scene.add(axisHelper)
      let gridHelper = new THREE.GridHelper(1000, 100)
      this.scene.add(gridHelper)
      this.controls = new OrbitControls(this.camera, this.labelRenderer.domElement)
      this.controls.enableDamping = true
      this.controls.dampingFactor = 0.25
      this.controls.rotateSpeed = 0.35
    },
    // 光照系统
    buildLightSystem() {
      let directionalLight = new THREE.DirectionalLight(0xffffff, 1.1);
      directionalLight.position.set(300, 1000, 500);
      directionalLight.target.position.set(0, 0, 0);
      directionalLight.castShadow = true;
      let d = 300;
      const fov = 45 //拍摄距离  视野角值越大，场景中的物体越小
      const near = 1 //相机离视体积最近的距离
      const far = 1000 //相机离视体积最远的距离
      const aspect = this.ViewDom.offsetWidth / this.ViewDom.offsetHeight; //纵横比
      directionalLight.shadow.camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
      directionalLight.shadow.bias = 0.0001;
      directionalLight.shadow.mapSize.width = directionalLight.shadow.mapSize.height = 1024;
      this.scene.add(directionalLight)

      let light = new THREE.AmbientLight(0xffffff, 0.9)
      this.scene.add(light)
    },
    // 根据浏览器窗口变化动态更新尺寸
    onWindowResize() {
      this.camera.aspect = this.ViewDom.offsetWidth / this.ViewDom.offsetHeight;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(this.ViewDom.offsetWidth, this.ViewDom.offsetHeight);
      this.labelRenderer.setSize(this.ViewDom.offsetWidth, this.ViewDom.offsetHeight);
    },
    // 窗口分辨率重置
    onDocumentMouseMove(event) {
      event.preventDefault();
      this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
      this.eventOffset.x = event.clientX;
      this.eventOffset.y = event.clientY;
      // 动态设置提示框的位置
      this.provinceInfo.style.left = this.eventOffset.x + 2 + 'px';
      this.provinceInfo.style.top = this.eventOffset.y + 2 + 'px';

      this.provincePicDescInfo.style.left = this.eventOffset.x + 2 + 'px';
      this.provincePicDescInfo.style.top = this.eventOffset.y + 2 + 'px';
    },
    // 初始化3d地图
    initMap() {
      // d3-geo转化坐标
      const projection = d3geo.geoMercator().center([104.0, 37.5]).scale(80).translate([0, 0]);
      // 遍历省份构建模型
      this.MapData.features.forEach(elem => {
        // 新建一个省份容器：用来存放省份对应的模型和轮廓线
        const province = new THREE.Object3D()
        const coordinates = elem.geometry.coordinates

        // 如果是Polygon
        if (elem.geometry.type == "Polygon") {
          coordinates.forEach(polygon => {
            // 这里的坐标要做2次使用：1次用来构建模型，1次用来构建轮廓线
            const shape = new THREE.Shape()
            const lineMaterial = new THREE.LineBasicMaterial({
              color: 0xffffff
            })
            const linGeometry = new THREE.BufferGeometry()
            let pointsArray = new Array();
            for (let i = 0; i < polygon.length; i++) {
              const [x, y] = projection(polygon[i])
              if (i === 0) {
                shape.moveTo(x, -y)
              }
              shape.lineTo(x, -y);
              pointsArray.push(new THREE.Vector3(x, -y, 8))
            }
            linGeometry.setFromPoints(pointsArray)
            const extrudeSettings = {
              depth: 8,
              bevelEnabled: false
            };
            const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings)
            const material = new THREE.MeshBasicMaterial({
              color: this.myColor.commonArea,
              transparent: true,
              opacity: 0.8
            })
            const mesh = new THREE.Mesh(geometry, material)
            const line = new THREE.Line(linGeometry, lineMaterial)
            province.add(mesh)
            province.add(line)
          })
        } else {
          // MutiPolygon
          coordinates.forEach(multiPolygon => {
            multiPolygon.forEach(polygon => {
              // 这里的坐标要做2次使用：1次用来构建模型，1次用来构建轮廓线
              const shape = new THREE.Shape()
              const lineMaterial = new THREE.LineBasicMaterial({
                color: 0xffffff
              })
              const linGeometry = new THREE.BufferGeometry()
              let pointsArray = new Array();
              for (let i = 0; i < polygon.length; i++) {
                const [x, y] = projection(polygon[i])
                if (i === 0) {
                  shape.moveTo(x, -y)
                }
                shape.lineTo(x, -y);
                pointsArray.push(new THREE.Vector3(x, -y, 8))
              }
              linGeometry.setFromPoints(pointsArray)
              const extrudeSettings = {
                depth: 8,
                bevelEnabled: false
              };
              const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings)
              const material = new THREE.MeshBasicMaterial({
                color: this.myColor.commonArea,
                transparent: true,
                opacity: 0.8
              })
              const mesh = new THREE.Mesh(geometry, material)
              const line = new THREE.Line(linGeometry, lineMaterial)
              province.add(mesh)
              province.add(line)
            })
          })
        }

        // 将geojson的properties放到模型中，后面会用到
        province.properties = elem.properties
        if (elem.properties.centroid) {
          const [x, y] = projection(elem.properties.centroid)
          province.properties._centroid = [x, y]
        }
        this.map.add(province)
      })
      // 地图位置平移及翻转
      this.map.position.set(150, -4, 0);
      this.map.rotateX(-Math.PI / 2);
      this.map.name = "worldMap";
      this.scene.add(this.map)
      this.ViewDom.appendChild(this.renderer.domElement)
      this.ViewDom.appendChild(this.labelRenderer.domElement)
      var mapViewCanvas = this.ViewDom.childNodes[0]
      mapViewCanvas.style.height = "100%" ;
      mapViewCanvas.style.width  = "100%" ;
      this.renderer.render(this.scene, this.camera);
      this.labelRenderer.render(this.scene, this.camera);
    },
    findCountry(name) {
      var country;
      this.map.children.forEach((item) => {
        if (item.properties.name == name) {
          country = item
        }
      })
      return country
    },
    // 显示国家的信息
    createProvinceInfo() {
      if (this.activeInstersect.length !== 0 && this.activeInstersect[0].object.parent.properties.name) {
        var properties = this.activeInstersect[0].object.parent.properties;
        this.provinceInfo.textContent = properties.chinese;
        this.provinceInfo.style.visibility = 'visible';
      } else {
        this.provinceInfo.style.visibility = 'hidden';
      }
    },
    showPointer3dLabel(){
      var pointerGroup = this.scene.getObjectByName("pointerGroup");
      if(pointerGroup){
        pointerGroup.visible = true ;
        pointerGroup.traverse((item)=>{
          if(item instanceof CSS3DObject){
            item.visible = false
          }else {
            item.visible = true
          }
        })
      }
    },
    hidePointer3dLabel(){
      var pointerGroup = this.scene.getObjectByName("pointerGroup");
      pointerGroup.visible = false ;
      if(pointerGroup){
        pointerGroup.traverse((item)=>{
          if(item.type == "Object3D"){
            item.visible = false
          }
        })
      }
    },
    isShowMapInfo(){
      if (this.map) {
        // 此处为离开版图的事件
        var intersects = this.raycaster.intersectObjects(this.map.children, true);
        if (this.activeInstersect && this.activeInstersect.length > 0) {
          this.activeInstersect.forEach(element => {
            // 设置捕获之前的16位颜色字符串
            element.object.material.color.set(this.beforeColor);
          });
        }

        this.activeInstersect = [];
        // 此处为射线捕获版图的事件
        for (var i = 0; i < intersects.length; i++) {
          if (intersects[i].object.material && intersects[i].object.material) {
            this.activeInstersect.push(intersects[i]);
            // 获取16位Hex颜色字符串
            // console.log(intersects[i])
            this.beforeColor = "#" + intersects[i].object.material.color.getHexString()
            // 焦点颜色
            intersects[i].object.material.color.set(this.myColor.focusArea);
            intersects[i].object.geometry.needsUpdate = true;
            break; // 只取第一个
          }
        }
        this.createProvinceInfo();
      }
    }
  }
}
</script>

<style scoped="scoped">
#provinceInfo {
  position: absolute;
  z-index: 2;
  background: white;
  padding: 10px;
  visibility: hidden;
}
#provincePicDescInfo {
  position: absolute;
  width: 200px;
  padding: 10px;
  z-index: 2;
  background: white;
  visibility: hidden;
  border-radius: 10px;
}



.label {
  color: #fff;
  font-size: 30px;
}
</style>
